<template>
	<view class="content" >
		<form @submit="submit">
			<u-navbar :is-back="true">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt20">新建群聊</view>
					<view class="slot-wrap-right pr">
						<button form-type="submit" style="height: 70rpx;background: none;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="qxl-icon" size="44"></u-icon>
							</view>
						</button>
					</view>
				</view>
			</u-navbar>

			<view v-if="show_main" class="main" >
				<!--<view class="disfr-lr bgf pv30">
					<view class="group-image" style="width: 150rpx;height: 150rpx;">
						<view @click="upload" class="pl20">
							<image :src="groupAvatar ? groupAvatar : '/static/image/group_chat.png'"
							mode="widthFix" style="width: 150rpx;border-radius: 4px;"></image>
						</view>
						<input type="text" :value="groupAvatar" name="face_url" class="hide"/>
					</view>
					<view style="width: 560rpx;text-align: right;">
						<u-picker mode="selector" v-model="showCate" :range="cateList" @confirm="confirmCate" range-key="name"></u-picker>
						<view @click="showCate=true" class="bbo f32 pr20" style="height: 80rpx;text-align: right;width: 100%;line-height: 80rpx;">
								<text v-if="cateName">{{cateName}}</text>
								<text v-else class="col999">*选择群分类</text>
								<u-icon name="arrow-right"></u-icon>
								<input  type="text" :value="caetId" name="classify_id" class="hide"/>
						</view>
						<view class="pr" style="height: 50rpx;">
							<input type="text" value="" name="name" class="mt30" style="border: none;width: 520rpx;height: 50rpx;"
							placeholder-style="color:#999999;font-size:32rpx;"
							 placeholder="*输入群名称"/>
						</view>
					</view>
					</view>-->
					
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>*群分类</text></view>
					
					<view @click="showCate=true">
						<u-picker mode="selector" v-model="showCate" :range="cateList" @confirm="confirmCate" range-key="name"></u-picker>
						<text v-if="cateName">{{cateName}}</text>
						<text v-else class="col999">*选择群分类</text>
						<u-icon name="arrow-right"></u-icon>
						<input  type="text" :value="caetId" name="classify_id" class="hide"/>
					 </view>
				</view>
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>*群名称</text></view>
					<view>
						<input type="text" value="" name="name" style="border: none;height: 50rpx;text-align: right;"
						placeholder-style="color:#999999;font-size:32rpx;"
						 placeholder="输入群名称"/>
					 </view>
				</view>

				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>*群简介</text></view>
					<view>
						<input type="text" value="" name="introduction" style="border: none;height: 50rpx;text-align: right;"
						placeholder-style="color:#999999;font-size:32rpx;"
						 placeholder="请输入群简价"/>
					 </view>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto hide">
					<view class="pt10"><text>进群方式</text></view>
					<view>
						<radio-group name="apply_join_option">
							<label>
								<radio value="FreeAccess"  style="transform:scale(0.7)" color="#2979ff"/>
								<text class="pr" style="left:-10rpx">自由入群</text>
							</label>
							<label>
								<radio value="NeedPermission" :checked="true" style="transform:scale(0.7);position: relative;right: -10rpx;" color="#2979ff"/>
								<text>审核入群</text>
							</label>
						</radio-group>
					 </view>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>群员可私聊</text></view>
					<view>
						<radio-group name="is_private_chat">
							<label>
								<radio value="1" :checked="true" style="transform:scale(0.7)" color="#2979ff"/>
								<text class="pr" style="left:-10rpx">是</text>
							</label>
							<label>
								<radio value="0" style="transform:scale(0.7);position: relative;right: -10rpx;" color="#2979ff"/>
								<text>否</text>
							</label>
						</radio-group>
					 </view>
				</view>
				
				<view class="disf f32 mt50 mb40">
					<view @click="switchUser" data-id="0" :class="'mr50 pl30 '+(switcType == 0 ? 'fnow' : '')">最近联系</view>
					<view @click="switchUser" data-id="1" :class="switcType == 1 ? 'fnow' : ''">关注我的</view>
				</view>
				<view :class="'recently bgf p30 '+(switcType == 0 ? 'show' : 'hide')">
					<view v-if="$vuex.state.globalData.conversationList.length <= 0" style="text-align: center;margin: 100rpx;">
						<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
						<view class="f32 col999 mt20">还没有最近联系人哦</view>
					</view>
					<checkbox-group name="member_ids">
						<view v-for="(item,index) in $vuex.state.globalData.conversationList" :key="item.conversationID">
							<view v-if="item.type == 'C2C' && item.userProfile.userID != $vuex.state.globalData.user.user_id" :class="'disf f30 '+(index > 0 ? 'mt20' : '')">
								<view class="pb10 pr20">
									<view style="height: 82rpx;overflow: hidden;border-radius:4px;">
										<u-image width="85rpx" height="85rpx" :src="item.userProfile ? item.userProfile.avatar : item.groupProfile.avatar">
											<template v-slot:error>
												<image src="/static/image/default-user.png" style="width:85rpx;height: 85rpx;"></image>
											</template>
										</u-image>
									</view>
								</view>
								<view class="bbo pb10" style="width: 600rpx;">
									<view class="f32 disfr-lr">
										<view>{{item.userProfile ? item.userProfile.nick : item.groupProfile.name}}</view>
										<view class="f28 col999">
											<checkbox :value="item.userProfile.userID" style="transform:scale(0.7)" color="#2979ff"/>
										</view>
									</view>
									<view class="col999 f28 pr" style="top:-10rpx;">ID号:{{item.userProfile ? item.userProfile.userID : item.groupProfile.name}}</view>
								</view>
							</view>
						</view>

					</checkbox-group>
				</view>
				
				<view :class="'follows bgf p30 '+(switcType == 1 ? 'show' : 'hide')">
					
					<view v-if="subscribeList.length <= 0" style="text-align: center;margin: 100rpx;">
						<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
						<view class="f32 col999 mt20">还没有人关注你哦</view>
					</view>
					
					<checkbox-group name="member_ids2">
						<view v-for="(item,index) in subscribeList" :key="index" >
							<view  :class="'disf f30 '+(index > 0 ? 'mt20' : '')">
								<view class="pb10 pr20">
									<u-image width="85rpx" height="85rpx" :src="item.head_pic">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:85rpx;height: 85rpx;"></image>
										</template>
									</u-image>
								</view>
								<view class="bbo pb10" style="width: 600rpx;">
									<view class="f32 disfr-lr">
										<view>{{item.nickname}}</view>
										<view class="f28 col999">
											<checkbox :value="item.user_id" style="transform:scale(0.7)" color="#2979ff"/>
										</view>
									</view>
									<view class="col999 f28 pr" style="top:-10rpx;">ID号：{{item.user_id}}</view>
								</view>
							</view>
						</view>
					</checkbox-group>
					<view v-if="next_page && subscribeList.length > 0" @click="getSubscribe" class="mt30 f28" style="text-align: center;">
										加载更多
					</view>
				</view>
				
			</view>
		</form>
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const cateList=ref({});
const showCate=ref(false);
const switcType=ref(0);
const subscribeList=ref([]);
//页面加载时
onLoad(async (options)=>{
    loadPage(options,false);
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-group-getclassify',{page_size:1000});
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	for(let i in ret.data.list){
		if(ret.data.list[i].is_special == 1) delete ret.data.list[i];
	}
	show_main.value=true;
	not_load.value=true;
	cateList.value=ret.data.list;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	topDropDownShow.value=false;
	uni.$utils.dataSetPage(event);
};
//切换好友
const switchUser=(e)=>{
	let id=e.currentTarget.dataset.id;
	switcType.value=id;
	if(id == 1) {
		if(subscribeList.value.length <= 0){
			getSubscribe();
		}
	}
};
//关注我的人
const next_page=ref({type:0,page_size:50});
const getSubscribe=async()=>{
	let ret = await uni.$get('/appapi-subscribe-getuserlist',next_page.value);
	console.log(ret);
	if(ret.error_code != 0) return;
	next_page.value=ret.data.next_page;
	subscribeList.value=[...subscribeList.value,...ret.data.list];
};
//选择群分类
const caetId=ref('');
const cateName=ref('');
const confirmCate=(e)=>{
	let index=e[0];
	if(!cateList.value[index]) return;
	caetId.value=cateList.value[index].id;
	cateName.value=cateList.value[index].name;
};
//上传群图片
const groupAvatar=ref('');
const upload=async()=>{
	uni.chooseImage({
	    count: 1, // 最多选择 1 张图片
	    sourceType: ['album', 'camera'], // 图片来源为相册和相机
	    success: async (res) => {
	        //console.log('选择的图片路径：', res.tempFilePaths);
			let ret = await uni.$uploadFile('/appapi-upload-image',res.tempFilePaths[0],{width:160,height:160});
			let imgUrl=ret.data.url;
			if(!imgUrl) uni.$utils.showToast('头像上传失败');
			groupAvatar.value=imgUrl;
	    },
	    fail: function (err) {
	        //console.error('选择图片失败：', err);
	    }
	});
};
//提交表单
const submit=async(e)=>{
	if(!not_load.value) return;
	let form=e.detail.value;
	if(!form.classify_id){
		uni.$utils.showToast('请选择群分类');
		return;
	}
	if(!form.name){
		uni.$utils.showToast('群名称必填');
		return;
	}
	if(!form.introduction){
		uni.$utils.showToast('群简介必填');
		return;
	}
	for(let i=0;i<form.member_ids.length;i++) form.member_ids[i]=parseInt(form.member_ids[i]);
	let member_ids=[...form.member_ids,...form.member_ids2];
	delete form.member_ids2;
	if(member_ids.length > 500){
		uni.$utils.showToast('群人数上限为500');
		return;
	}
	if(member_ids.length < 2){
		uni.$utils.showToast('创建群聊最少2个人起');
		return;
	}
	member_ids = Array.from(new Set(member_ids));
	member_ids=member_ids.join(',');
	form.member_ids=member_ids;
	//console.log(form);return;
	not_load.value=false;
	let ret=await uni.$post('/appapi-group-save',{},form);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast(ret.info,0,()=>{
		uni.navigateBack({data:1});
	});
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
</style>
